微信小程序实践_3点击版面图片获取新闻链接

前言

上回讲到将人民日报的首版图片显示出来，本次将实现点击新闻对应区域，阅读该新闻

热区

热区就是在网页上进行了链接的一个区域

在人民日报电子版的版面图片上，点击想要看的新闻，右侧就会出现该新闻的详细报道，我们点击的地方就是“热区”，在网页中可通过<map></map>标签实现此项功能,但是小程序中未提供类似功能的组件，要肿么办？

俗话说：只要思想不滑坡，办法总比困难多

虽然没有类似组件，可是我们只要知道区域的范围就好啦，点击版面图片的某块区域时，判断触点是否在该区域内就行了。那么如何判断？

代码实现

如上所述，版面图片的热区信息包含在map标签内，正则匹配走起~
修改paper.js的onLoad方法为：

  onLoad: function (options) {
    var self = this;
    //获取系统宽高，并计算宽高比
    ..........
    wx.request({
      url: url,
      success: function (res) {
        var html = res.data;
        //正则式-匹配版面图片
        var pagePicImgReg = /<img[^>]+src=(.*)\s+border=0\s+usemap=#pagepicmap[^>]*>/i;
        //正则式-匹配热区信息
        var pagePicMapReg = /<map[^>]+name=pagepicmap[^>]*>.*<\/map>/i;
        //版面图片匹配结果
        var pagePicImgMatch = html.match(pagePicImgReg);
        //热区信息匹配结果
        var pagePicMapMatch = html.match(pagePicMapReg);
        //中间变量，存放map标签内容
        var mapHtml = "";
        //中间变量，存放img的src内容
        var imgSrc = "";
        pagePicMapMatch && (mapHtml = pagePicMapMatch[0]);
        pagePicImgMatch && (imgSrc = pagePicImgMatch[1].replace('../../..', imgUrl));
        //正则式-匹配map标签里area信息，coords是区域定点信息，href是该区域所链接到的文章
        var areaReg = /<area\s+coords="(.*?)"[^>]+href="(.*?)"[^>]*>/ig;
        var area;
        //存放该版面图片的area内容
        var areaArray = []
        while ((area = areaReg.exec(mapHtml)) != null) {
          areaArray.push({ "coords": area[1].split(",").map(self.computeCoords), "href": area[2] });//href为当前版面每条文章的链接
        }
        //console.log("areaArray ", areaArray);
        self.setData({
          paperInfo: [{ "imgSrc": imgSrc, "areaArray": areaArray}]
        });
      }
    })
  },

paper.js添加computeCoords方法： 由于响应的coords坐标信息对应的版面图片默认为400*571px的，所以不同设备的coords要作等比例缩放

  //计算适合该设备的coords大小
  computeCoords: function (coord, index) {
    var self = this;
    var tmpCoord = parseInt(coord);
    if (index % 2 == 1) {//代表x坐标
      tmpCoord = Math.ceil(tmpCoord * (400 / self.data.windowWidth));
    }
    if (index % 2 == 0) {//代表y坐标
      tmpCoord = Math.ceil(tmpCoord * (571 / self.data.windowHeight));
    }
    return tmpCoord;
  },

知道了版面图片的热区情况，如何判断用户点击的是哪篇文章呢？
ray-crossing算法
1.简单来说，该算法可以判断一点是否在给定的某个不规则封闭区域内。（幸运的是版面图片上画的热区是简单的封闭图形，且大多是矩形）
该算法的大致思路是：过被判断的点（触点）作一条向右的射线，若射线与区域的边的交点为奇数，则认为该点在此区域内，若为偶数，则未在该区域内
对于边界点（区域顶点和边上的点），对于本应用来说，用户点到边界的概率很小，是可以忽略的
2.实现：在paper.js中添加以下方法

  //point为用户触点的坐标，coords为某个热区顶点情况
  pointInRegin: function (point, coords) {
    //coords中每两个是一对坐标
    var count = 0;//统计目标点向右画射线与多边形相交次数
    var x = point[0];//用户触点x位置
    var y = point[1];//用户触点y位置
    var i = 0, j = 0;//j代表i的下一个坐标点

    //coords中确定一条直线的两点的坐标
    var xi = 0;
    var yi = 0;
    var xj = 0;
    var yj = 0;
    for (i = 0, j = coords.length - 2; i < coords.length - 1; j = i, i = +2) {
      xi = coords[i];
      yi = coords[i + 1];
      xj = coords[j];
      yj = coords[j + 1];
      if (yi == yj) { continue; }//如果两点水平，则跳过
      if (y < Math.min(yi, yj)||y > Math.max(yi, yj)) { continue; }//如果触点低于该线段或高于该线段，则跳过
      if (x >= Math.max(xi, xj)) { continue; }//如果触点在该线段的右边，则跳过
      //该触点与coords所确定的区域有交叉，求该交叉点的x坐标的值
      var intersection_x = (xj - xi) * (y - yi) / (yj - yi) + xi;
      if (x < intersection_x) { count++; }//如果交叉点在触点的右边，相交次数加1
    }
    if (count % 2 == 0) { return false; }//在多边形外面或边上
    if (count % 2 == 1) { return true; }//在多边形里面

  },

paper.js添加确定触点点击的新闻链接方法：

/**
  * 确定触点的文章
  * 返回文章的href
  * pagenum代表版面号（从1开始编号）
  */
  getArticleHref: function (fingerx, fingery, pagenum) {
    var self = this;

    var currentPageAreas = self.data.paperInfo[pagenum - 1].areaArray;
    var aresLength = currentPageAreas.length;
    var i;
    var points = [];
    for (i = 0; i < aresLength; i++) {
      points = currentPageAreas[i].coords;
      if (self.pointInRegin([fingerx, fingery], points)) {
        console.log("找到href",currentPageAreas[i].href);
        return currentPageAreas[i].href;
      }else{console.log("未在当前coords内");}
    }
  },
  /**
  * 点击跳转到相关文章
  *记得在paper.wxml文件的img组件上绑定toArticle事件
  */
  toArticle: function (e) {
    var self = this;
    var fingerx = e.detail.x;//x,y代表距离其父文档左上角的距离
    var fingery = e.detail.y; 
  
    //获取触点所在的文章href，目前只有第一版所以pagenum为1
    var href = self.getArticleHref(fingerx, fingery, pagenum);
    if (href) {
      console.log("获取的文章链接为 ",href);
    }else{
      console.log("未找到文章链接");
    }
  },

编译运行

按照上篇文章的方法，编译运行程序，点击版面图片上的任意一条新闻，查看控制台是否输出该文章的href